Security News
Python Overtakes JavaScript as Top Programming Language on GitHub
Python becomes GitHub's top language in 2024, driven by AI and data science projects, while AI-powered security tools are gaining adoption.
Reakit is a toolkit for building accessible web apps with React. It provides a set of low-level components and hooks that can be used to create custom, accessible UI components.
Accessible Dialog
This code demonstrates how to create an accessible dialog using Reakit. The `useDialogState` hook manages the state of the dialog, and the `Dialog` and `DialogDisclosure` components are used to render the dialog and the button that opens it.
import React from 'react';
import { useDialogState, Dialog, DialogDisclosure } from 'reakit/Dialog';
function App() {
const dialog = useDialogState();
return (
<>
<DialogDisclosure {...dialog}>Open Dialog</DialogDisclosure>
<Dialog {...dialog} aria-label="Welcome">
<p>Welcome to Reakit Dialog!</p>
<button onClick={dialog.hide}>Close</button>
</Dialog>
</>
);
}
export default App;
Accessible Menu
This code demonstrates how to create an accessible menu using Reakit. The `useMenuState` hook manages the state of the menu, and the `Menu`, `MenuItem`, and `MenuButton` components are used to render the menu and its items.
import React from 'react';
import { useMenuState, Menu, MenuItem, MenuButton } from 'reakit/Menu';
function App() {
const menu = useMenuState();
return (
<>
<MenuButton {...menu}>Menu</MenuButton>
<Menu {...menu} aria-label="Preferences">
<MenuItem {...menu}>Profile</MenuItem>
<MenuItem {...menu}>Settings</MenuItem>
<MenuItem {...menu}>Logout</MenuItem>
</Menu>
</>
);
}
export default App;
Accessible Tabs
This code demonstrates how to create accessible tabs using Reakit. The `useTabState` hook manages the state of the tabs, and the `Tab`, `TabList`, and `TabPanel` components are used to render the tabs and their content.
import React from 'react';
import { useTabState, Tab, TabList, TabPanel } from 'reakit/Tab';
function App() {
const tab = useTabState();
return (
<>
<TabList {...tab} aria-label="My tabs">
<Tab {...tab}>Tab 1</Tab>
<Tab {...tab}>Tab 2</Tab>
<Tab {...tab}>Tab 3</Tab>
</TabList>
<TabPanel {...tab}>Content 1</TabPanel>
<TabPanel {...tab}>Content 2</TabPanel>
<TabPanel {...tab}>Content 3</TabPanel>
</>
);
}
export default App;
React Aria is a library of React hooks that provides accessible UI primitives. It is part of Adobe's React Spectrum project. React Aria focuses on providing low-level hooks for building accessible components, similar to Reakit, but with a broader range of accessibility features.
Chakra UI is a simple, modular, and accessible component library that gives you the building blocks you need to build your React applications. It provides a set of high-level components with built-in accessibility, making it easier to build accessible UIs compared to Reakit's low-level approach.
Toolkit for building accessible rich web apps with React.
Explore website »
By donating $100 or more you become a sponsor and help in the development of this project. Thank you to all our sponsors! 🙏
By donating $5 or more you become a backer and help in the development of this project. Thank you to all our backers! 🙏
npm:
npm i reakit
Yarn:
yarn add reakit
Thanks to @nosebit for the package name on npm.
import React from "react";
import ReactDOM from "react-dom";
import { useDialogState, Dialog, DialogDisclosure } from "reakit";
function App() {
const dialog = useDialogState();
return (
<div>
<DialogDisclosure {...dialog}>Open dialog</DialogDisclosure>
<Dialog {...dialog} aria-label="Welcome">
Welcome to Reakit!
</Dialog>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
Play with this on CodeSandbox and read the documentation to learn more.
This project exists thanks to all the people who contribute. Learn more on the contributing guide.
Logo by Leonardo Elias.
MIT © Diego Haz
FAQs
Toolkit for building accessible rich web apps with React
We found that reakit demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Python becomes GitHub's top language in 2024, driven by AI and data science projects, while AI-powered security tools are gaining adoption.
Security News
Dutch National Police and FBI dismantle Redline and Meta infostealer malware-as-a-service operations in Operation Magnus, seizing servers and source code.
Research
Security News
Socket is tracking a new trend where malicious actors are now exploiting the popularity of LLM research to spread malware through seemingly useful open source packages.